<template>
  <el-header class="content-header">
    <template v-if="!isBatchHeaderShow">
      <div class="seach head-item">
        <el-input
          size="medium"
          v-model="picSearchOptions.productName"
          placeholder="请输入名称搜索"
          class="input-with-select"
          style="width: 200px"
        >
        </el-input>
        <el-input
          size="medium"
          v-model="picSearchOptions.productCode"
          placeholder="请输入产品Code搜索"
          class="input-with-select"
          style="width: 200px; margin-left: 10px"
        >
        </el-input>
      </div>

      <div class="head-item head-right">
        <div class="head-item head-handle-btn" style="display: flex">
          <div class="arrc">
            <button class="cl-button cl-button--primary" @click="empty">
              置空
            </button>
          </div>
          <div class="arrc">
            <button
              class="cl-button cl-button--primary"
              @click="searchEnterFun"
            >
              搜索
            </button>
          </div>
          <div class="arrc">
            <button class="cl-button cl-button--primary" @click="productEdit()">
              +新增产品
            </button>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="handle-batch">
        <span>
          已选
          <i style="color: #fe9837">{{ countPic }}</i> 张表单
        </span>
        <div>
          <button class="cl-button cl-button--text_danger" @click="batchDelete">
            删除
          </button>
        </div>
      </div>
    </template>
  </el-header>
</template>
<script>
export default {
  props: ["picSearchOptions", "isBatchHeaderShow", "countPic", "isPopup"],
  data() {
    return {};
  },
  methods: {
    // 新增产品
    productEdit(row) {
      this.$router.push({
        path: "/product/create",
      });
    },
    //刷新页面
    getList() {
      this.$emit("getList");
    },
    // 置空搜索
    empty() {
      this.picSearchOptions.productName = "";
      this.picSearchOptions.productCode = "";
      this.getList();
    },

    searchEnterFun() {
      this.getList();
    },
    //
    batchDelete() {
      this.$emit("batchDelete");
    },
  },
};
</script>


<style  lang="scss" scoped>
@import "@/styles/content-manage/manage-head.scss";
.arrc {
  cursor: pointer;
  text-align: center;
  width: 90px;
  font-size: 12px;
  border-radius: 2px;
  margin-right: 20px;
}
.seach {
  margin-left: -4px;
}
.upload-wrap {
  &:hover {
    opacity: 0.8;
  }
}
.head-middle {
  margin-left: 0;
  padding-right: 0;
  margin-right: auto;
}
.handle-batch button {
  padding: 9px 16px;
  margin: 0;
  min-width: 60px;
}
.icon_hover {
  color: rgb(215, 216, 217);
}
.icon_hover:hover {
  color: #999;
}
</style>
